React Native এ Localization এবং Internationalization

Localization (L10n) এবং Internationalization (I18n) হল দুইটি প্রক্রিয়া যা আপনাকে React Native অ্যাপ্লিকেশনটি বিভিন্ন ভাষা এবং সংস্কৃতির জন্য প্রস্তুত করতে সাহায্য করে। এগুলি একটি অ্যাপ্লিকেশনকে গ্লোবাল মার্কেটের জন্য উন্মুক্ত করার প্রক্রিয়া।

• Internationalization (I18n): অ্যাপ্লিকেশনটি বিভিন্ন ভাষা এবং অঞ্চলসমূহে ব্যবহারযোগ্য করার জন্য কোড এবং ডিজাইন প্রস্তুত করা। এটি এক ধরনের প্রস্তুতির কাজ, যা পরে localization প্রক্রিয়ার মাধ্যমে বাস্তবায়ন করা হয়।
• Localization (L10n): একটি নির্দিষ্ট ভাষা বা অঞ্চলের জন্য অ্যাপ্লিকেশন কাস্টমাইজ করা। এটি আন্তর্জাতিককরণের পরবর্তী ধাপ, যেখানে অ্যাপ্লিকেশনটির ভাষা, সময়ের ফর্ম্যাট, মুদ্রার প্রতীক ইত্যাদি নির্দিষ্ট অঞ্চলের জন্য বদলানো হয়।

React Native-এ এই দুটি প্রক্রিয়া সমর্থন করতে react-i18next অথবা react-native-localize এর মতো লাইব্রেরি ব্যবহার করা হয়। এখানে আমরা i18next এবং react-native-localize ব্যবহার করে Localization এবং Internationalization সেটআপ করার পদ্ধতি দেখব।

১. react-i18next সেটআপ (Internationalization)

react-i18next একটি শক্তিশালী লাইব্রেরি যা i18n সমর্থন করে এবং React Native অ্যাপ্লিকেশনগুলোর জন্য সহজে Localization এবং Translation পরিচালনা করতে সাহায্য করে।

Step 1: লাইব্রেরি ইনস্টলেশন

প্রথমে, আপনার React Native প্রোজেক্টে react-i18next এবং i18next ইনস্টল করুন:

npm install react-i18next i18next
npm install react-native-localize

Step 2: i18n কনফিগারেশন

আপনার প্রোজেক্টে একটি i18n.js ফাইল তৈরি করুন এবং সেটি কনফিগার করুন:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

// Translation resources
const resources = {
  en: {
    translation: {
      welcome: "Welcome",
      hello: "Hello",
      language: "Language",
    },
  },
  fr: {
    translation: {
      welcome: "Bienvenue",
      hello: "Bonjour",
      language: "Langue",
    },
  },
};

// Detect the device language
const locales = RNLocalize.getLocales();
const defaultLanguage = locales[0]?.languageCode || 'en';

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: defaultLanguage, // Default language
    fallbackLng: 'en', // Fallback language
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

ব্যাখ্যা:

• react-native-localize ব্যবহার করে ডিভাইসের ভাষা সনাক্ত করা হচ্ছে।
• resources অংশে দুটি ভাষার জন্য ট্রান্সলেশন দেয়া হয়েছে (en এবং fr), যেখানে প্রতিটি ভাষার জন্য নির্দিষ্ট শব্দগুলোর মান প্রদান করা হয়েছে।

Step 3: i18n সেটআপ কম্পোনেন্টে ব্যবহার

এখন আপনার অ্যাপ্লিকেশনটি i18n ব্যবহার করার জন্য প্রস্তুত। মূল অ্যাপ্লিকেশনে i18n.js এর কনফিগারেশনটি ইমপোর্ট করুন এবং useTranslation হুক ব্যবহার করুন।

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';
import './i18n'; // Import the i18n configuration

const App = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang); // Change language dynamically
  };

  return (
    <View>
      <Text>{t('welcome')}</Text>
      <Text>{t('hello')}</Text>

      <Button title={t('language')} onPress={() => changeLanguage('fr')} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• useTranslation হুক ব্যবহার করে ভাষার মানগুলো (যেমন welcome, hello) অ্যাক্সেস করা হচ্ছে।
• changeLanguage ফাংশন ব্যবহার করে ভাষা পরিবর্তন করা হচ্ছে। এখানে fr ভাষায় স্যুইচ করার উদাহরণ দেয়া হয়েছে।

Step 4: ভাষা পরিবর্তন

আপনি language switcher বা button দিয়ে ব্যবহারকারীকে ভাষা পরিবর্তন করার সুযোগ দিতে পারেন, যা উপরের কোডে দেখানো হয়েছে।

২. react-native-localize সেটআপ (Localization)

react-native-localize লাইব্রেরি ব্যবহার করে আপনি ডিভাইসের সময়, অঞ্চল, ভাষা এবং অন্যান্য স্থানীয় সেটিংস শনাক্ত করতে পারেন, যা আপনাকে অ্যাপ্লিকেশনটিকে বিভিন্ন অঞ্চলের জন্য কাস্টমাইজ করতে সাহায্য করবে।

Step 1: react-native-localize ইনস্টলেশন

যদি আপনি আগে থেকেই react-native-localize ইনস্টল না করে থাকেন, তবে এটি ইনস্টল করুন:

npm install react-native-localize

Step 2: Localization ব্যবহার

আপনি react-native-localize ব্যবহার করে ডিভাইসের স্থানীয় সেটিংস শনাক্ত করতে এবং সেগুলির ভিত্তিতে ভাষা এবং সময়ের ফরম্যাট কাস্টমাইজ করতে পারেন।

import React from 'react';
import { View, Text } from 'react-native';
import * as RNLocalize from 'react-native-localize';
import { useTranslation } from 'react-i18next';

const App = () => {
  const { t } = useTranslation();

  // Get current device language
  const deviceLanguage = RNLocalize.getLocales()[0].languageCode;

  return (
    <View>
      <Text>{t('welcome')}</Text>
      <Text>{`Current Device Language: ${deviceLanguage}`}</Text>
    </View>
  );
};

export default App;

ব্যাখ্যা:

• RNLocalize.getLocales() এর মাধ্যমে ডিভাইসের ভাষা এবং অঞ্চল সনাক্ত করা হচ্ছে এবং তা UI তে প্রদর্শিত হচ্ছে।

৩. Date and Time Formatting (Localization)

Localization প্রক্রিয়ায় date এবং time ফরম্যাটও কাস্টমাইজ করা হয়। React Native-এ react-native-localize এর মাধ্যমে এটি করতে পারেন।

উদাহরণ:

import React from 'react';
import { View, Text } from 'react-native';
import * as RNLocalize from 'react-native-localize';

const App = () => {
  // Get current date and time
  const currentDate = new Date();
  const formattedDate = RNLocalize.formatDate(currentDate, { format: 'long', locale: 'en-US' });

  return (
    <View>
      <Text>{`Formatted Date: ${formattedDate}`}</Text>
    </View>
  );
};

export default App;

ব্যাখ্যা:

• RNLocalize.formatDate() ব্যবহার করে স্থানীয় ভাষার ফরম্যাট অনুযায়ী date কাস্টমাইজ করা হচ্ছে।

সারাংশ

React Native এ Localization এবং Internationalization কার্যকরভাবে অ্যাপ্লিকেশনটি বৈশ্বিক ব্যবহারকারীদের জন্য প্রস্তুত করতে সাহায্য করে। i18next এবং react-native-localize এর মাধ্যমে আপনি:

• Internationalization (I18n) এর জন্য কোডে ভাষা এবং স্থানীয়করণের জন্য প্রস্তুতি নিতে পারেন।
• Localization (L10n) এর মাধ্যমে ব্যবহারকারীকে বিভিন্ন ভাষায় অ্যাপ্লিকেশনটি ব্যবহার করতে সক্ষম করতে পারেন, যেমন ভাষা পরিবর্তন, সময়ের ফরম্যাট, মুদ্রার সিম্বল ইত্যাদি কাস্টমাইজ করা।

এই দুইটি টেকনিক React Native অ্যাপ্লিকেশনকে গ্লোবাল মার্কেটে একটি আন্তর্জাতিক অ্যাপ্লিকেশন হিসেবে তৈরি করার জন্য অপরিহার্য।

I18n (Internationalization) হল একটি প্রক্রিয়া যার মাধ্যমে আপনার অ্যাপ্লিকেশন বিভিন্ন ভাষায় সমর্থন যোগাতে সক্ষম হয়। এটি একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য যখন আপনি আন্তর্জাতিক বা বহুভাষী ব্যবহারকারীদের লক্ষ্য করছেন। React Native-এ I18n লোকালাইজেশন সম্পাদন করার জন্য react-i18next বা react-native-localize এর মতো প্যাকেজ ব্যবহৃত হয়।

এই টিউটোরিয়ালে, আমি দেখাবো কিভাবে react-i18next প্যাকেজ ব্যবহার করে React Native অ্যাপ্লিকেশনে ভাষা পরিবর্তন এবং লোকালাইজেশন সেটআপ করা যায়।

React Native-এ I18n এর জন্য react-i18next সেটআপ

react-i18next React এবং React Native অ্যাপ্লিকেশনে I18n ব্যবস্থাপনা এবং ভাষার অনুবাদ সহজ করে তোলে। এটি স্বয়ংক্রিয় ভাষা সনাক্তকরণ, কাস্টম ভাষা ফাইল ইত্যাদি সাপোর্ট করে।

১. প্যাকেজ ইনস্টল করা

প্রথমে আপনাকে react-i18next এবং i18next প্যাকেজগুলি ইনস্টল করতে হবে:

npm install react-i18next i18next react-native-localize

এছাড়া, আপনি i18next-http-backend (যদি অনলাইন থেকে ভাষা ফাইল লোড করতে চান) বা i18next-fs-backend (যদি লোকাল ফাইল ব্যবহার করতে চান) ব্যবহার করতে পারেন।

২. i18next কনফিগারেশন সেটআপ

এবার আপনি i18next কনফিগারেশন তৈরি করবেন এবং তা react-i18next এর মাধ্যমে ব্যবহার করবেন।

1. i18n.js কনফিগারেশন ফাইল তৈরি করা:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'react-native-localize';

// ভাষা ফাইল গুলি
import en from './locales/en.json';
import bn from './locales/bn.json';

// ভাষার সেটআপ
i18n
  .use(initReactI18next) // react-i18next এর সাথে ইন্টিগ্রেশন
  .init({
    resources: {
      en: {
        translation: en, // ইংরেজি ভাষার ফাইল
      },
      bn: {
        translation: bn, // বাংলা ভাষার ফাইল
      },
    },
    lng: 'en', // ডিফল্ট ভাষা
    fallbackLng: 'en', // যদি নির্দিষ্ট ভাষা না পাওয়া যায়, তাহলে ইংরেজি ব্যবহার হবে
    interpolation: {
      escapeValue: false, // React এর জন্য এটির প্রয়োজন নেই
    },
    react: {
      useSuspense: false, // কিছু বিলম্ব থেকে রেন্ডারিং এড়ানোর জন্য
    },
  });

// স্বয়ংক্রিয়ভাবে ব্যবহারকারীর লোকেশন অনুযায়ী ভাষা সিলেক্ট করা
const setLanguage = () => {
  const bestLang = Localization.findBestAvailableLanguage(['en', 'bn']);
  if (bestLang) {
    i18n.changeLanguage(bestLang.languageTag);
  }
};

setLanguage();

export default i18n;

2. ভাষার JSON ফাইল তৈরি করা:

এবার আমরা ভাষার জন্য JSON ফাইল তৈরি করব, যেখানে প্রতিটি ভাষার জন্য অনুবাদ থাকবে।

en.json (ইংরেজি):

{
  "welcome": "Welcome to the App",
  "greeting": "Hello, {{name}}!"
}

bn.json (বাংলা):

{
  "welcome": "অ্যাপসে স্বাগতম",
  "greeting": "হ্যালো, {{name}}!"
}

৩. React Native কম্পোনেন্টে I18n ব্যবহার করা

এখন আপনি আপনার React Native কম্পোনেন্টে useTranslation হুক ব্যবহার করে ভাষার অনুবাদ দেখতে পারবেন।

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t, i18n } = useTranslation();

  // ভাষা পরিবর্তন ফাংশন
  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24 }}>{t('welcome')}</Text>
      <Text style={{ fontSize: 18 }}>{t('greeting', { name: 'Aziz' })}</Text>

      {/* ভাষা পরিবর্তন বাটন */}
      <Button title="Change to Bengali" onPress={() => changeLanguage('bn')} />
      <Button title="Change to English" onPress={() => changeLanguage('en')} />
    </View>
  );
};

export default MyComponent;

৪. App.js ফাইলে I18n ইন্টিগ্রেশন:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text } from 'react-native';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

const Stack = createStackNavigator();

const HomeScreen = () => {
  return (
    <View>
      <Text>{i18n.t('welcome')}</Text>
    </View>
  );
};

const App = () => {
  return (
    <I18nextProvider i18n={i18n}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </I18nextProvider>
  );
};

export default App;

React Native I18n এর সুবিধা:

1. ভাষার সহজ সিলেকশন: ব্যবহারকারীরা সহজেই তাদের পছন্দের ভাষা নির্বাচন করতে পারেন, এবং অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে সেই ভাষায় অনুবাদ প্রদর্শন করবে।
2. স্বয়ংক্রিয় ভাষা সনাক্তকরণ: react-native-localize এর মাধ্যমে আপনার অ্যাপ্লিকেশন ব্যবহারকারীর অবস্থান থেকে সঠিক ভাষা সনাক্ত করতে সক্ষম।
3. ভাষার পরিবর্তন: react-i18next দিয়ে ভাষা পরিবর্তন খুব সহজ এবং এটি রিয়েল-টাইমে UI আপডেট করতে সক্ষম।
4. অনুবাদ ফাইলের পোর্টেবিলিটি: আপনি ভাষার অনুবাদ JSON ফাইলের মাধ্যমে সংরক্ষণ করতে পারবেন, যা অন্য ডেভেলপারদের বা দেশগুলোর জন্য সহজেই এক্সপোর্ট এবং ম্যানেজ করা যায়।
5. স্বাভাবিক এবং স্বচ্ছ UI/UX: ব্যবহারকারীর পছন্দ অনুযায়ী ভাষা সিলেকশন এবং প্রদর্শন টেক্সট স্বাভাবিক এবং স্পষ্ট থাকে।

সারাংশ

React Native-এ I18n এর মাধ্যমে অ্যাপ্লিকেশন লোকালাইজেশন প্রক্রিয়া আরও সহজ হয়। react-i18next প্যাকেজ ব্যবহার করে আপনি বিভিন্ন ভাষার জন্য অনুবাদ, ভাষার সিলেকশন, এবং স্বয়ংক্রিয় ভাষা সনাক্তকরণ সিস্টেম তৈরি করতে পারবেন। এটি অ্যাপ্লিকেশনের আন্তর্জাতিক ব্যবহারকারীদের জন্য উপযোগী এবং ব্যবহারকারী বান্ধব করে তোলে।

React Native অ্যাপে Multiple Language Support তৈরি করা ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ ফিচার, যা বিভিন্ন ভাষায় অ্যাপের কন্টেন্ট প্রদর্শন করতে সহায়তা করে। এর মাধ্যমে আপনার অ্যাপ্লিকেশন আন্তর্জাতিকভাবে বিস্তৃত হতে পারে এবং ব্যবহারকারীরা তাদের নিজস্ব ভাষায় অ্যাপ ব্যবহার করতে সক্ষম হবে।

এই গাইডে আমরা দেখব কীভাবে React Native অ্যাপে Multiple Language Support যোগ করতে হয়, এবং কিভাবে i18n (Internationalization) এবং L10n (Localization) ব্যবহার করা যায়।

Step 1: Install Dependencies

React Native-এ multiple language support পরিচালনা করতে সাধারণত react-i18next এবং i18next লাইব্রেরি ব্যবহার করা হয়। এটি ব্যবহারের মাধ্যমে বিভিন্ন ভাষায় কনটেন্ট লোড করা এবং সুইচ করা সম্ভব হয়।

1. React Native প্রজেক্টে i18next এবং react-i18next ইনস্টল করুন:

npm install i18next react-i18next

2. কিছু অতিরিক্ত dependency ইনস্টল করতে হবে (যেমন react-native-localize যদি আপনি লোকালাইজেশন ব্যবহার করতে চান):

npm install react-native-localize

Step 2: Set Up i18next Configuration

i18next লাইব্রেরি কনফিগার করে আপনি বিভিন্ন ভাষায় কনটেন্ট লোড এবং সুইচ করতে পারবেন। এখানে একটি সহজ কনফিগারেশন উদাহরণ দেওয়া হলো।

1. i18n.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { I18nManager } from 'react-native';
import en from './locales/en.json';
import bn from './locales/bn.json';

// i18next কনফিগারেশন
i18n
  .use(initReactI18next) // react-i18next এর সাথে সংযোগ
  .init({
    resources: {
      en: { translation: en }, // ইংরেজি ভাষার কনটেন্ট
      bn: { translation: bn }, // বাংলা ভাষার কনটেন্ট
    },
    lng: 'en', // ডিফল্ট ভাষা
    fallbackLng: 'en', // ভাষা না পেলে ডিফল্ট ভাষা
    interpolation: {
      escapeValue: false, // React already escapes variables
    },
  });

// বাংলা ভাষা ডিরেক্টিভসের জন্য
I18nManager.allowRTL(false); // Right-to-left ভাষা নিষ্ক্রিয় করা

export default i18n;

এখানে en.json এবং bn.json ফাইলের মধ্যে ভাষা-specific কনটেন্ট থাকবে, এবং এটি কনফিগারেশনের মাধ্যমে লোড করা হবে।

Step 3: Create Language JSON Files

আপনার প্রতিটি ভাষার জন্য একটি JSON ফাইল তৈরি করতে হবে যেখানে আপনি সব স্ট্যাটিক কনটেন্ট রাখবেন। যেমন en.json এবং bn.json ফাইল দুটি তৈরি করুন।

1. locales/en.json (ইংরেজি কনটেন্ট):

{
  "welcome": "Welcome to the App",
  "login": "Login",
  "signup": "Sign Up"
}

2. locales/bn.json (বাংলা কনটেন্ট):

{
  "welcome": "অ্যাপসে স্বাগতম",
  "login": "লগইন",
  "signup": "সাইন আপ"
}

এই ফাইলগুলির মধ্যে আপনি অ্যাপের সকল স্ট্যাটিক কনটেন্ট রেখে দেবেন।

Step 4: Using i18next in Components

এখন, আপনি React Native কম্পোনেন্টে i18next এর মাধ্যমে ভাষা পরিবর্তন এবং কনটেন্ট প্রদর্শন করতে পারবেন।

1. App.js ফাইলে useTranslation হুক ব্যবহার করে কিভাবে ভাষা পরিবর্তন এবং কনটেন্ট ব্যবহার করতে হবে তা দেখানো হলো:

import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { useTranslation } from 'react-i18next';

const App = () => {
  const { t, i18n } = useTranslation();
  const [language, setLanguage] = useState('en');

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang); // ভাষা পরিবর্তন
    setLanguage(lang);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{t('welcome')}</Text> {/* Translation here */}
      
      <Button title={t('login')} onPress={() => {}} />
      <Button title={t('signup')} onPress={() => {}} />

      <TouchableOpacity onPress={() => changeLanguage('en')}>
        <Text>Switch to English</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => changeLanguage('bn')}>
        <Text>বাংলা ভাষায় যান</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Explanation:

• useTranslation() হুকটি ব্যবহার করে ভাষার কনটেন্ট লোড করা হচ্ছে।
• t() ফাংশন দিয়ে প্রতিটি স্ট্যাটিক টেক্সট যেমন welcome, login, signup প্রদর্শন করা হচ্ছে।
• ভাষা পরিবর্তনের জন্য changeLanguage ফাংশন ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে ইংরেজি বা বাংলা ভাষায় সুইচ করার সুযোগ দেয়।

Step 5: Set Up Language Switching UI

আপনি ব্যবহারকারীদের জন্য একটি UI তৈরি করতে পারেন যেখানে তারা তাদের পছন্দসই ভাষা বেছে নিতে পারে। উপরোক্ত উদাহরণে দুটি বাটন ব্যবহার করে English এবং Bangla ভাষা পরিবর্তন করার অপশন দেয়া হয়েছে।

এটি ব্যবহারকারীকে সহজে ভাষা পরিবর্তনের সুবিধা দেবে।

Step 6: Handling RTL Languages

যদি আপনার অ্যাপটি Right-to-Left (RTL) ভাষা যেমন আরবি বা হিব্রু সমর্থন করে, তাহলে i18n কনফিগারেশনে RTL সাপোর্টও যুক্ত করতে পারেন।

import { I18nManager } from 'react-native';

const changeLanguage = (lang) => {
  i18n.changeLanguage(lang);
  if (lang === 'ar') {
    I18nManager.forceRTL(true);
  } else {
    I18nManager.forceRTL(false);
  }
};

এটি RTL ভাষার জন্য নেভিগেশন এবং UI কম্পোনেন্টগুলোকে সঠিকভাবে উপস্থাপন করতে সাহায্য করবে।

Step 7: Testing the Language Switch

অ্যাপের মধ্যে ভাষা পরিবর্তন ফিচার সফলভাবে কাজ করতে, আপনাকে অ্যাপটি রান করে দেখে নিশ্চিত হতে হবে যে, প্রতিটি ভাষায় কনটেন্ট সঠিকভাবে প্রদর্শিত হচ্ছে এবং ভাষা পরিবর্তন করা গেলে UI সঠিকভাবে আপডেট হচ্ছে।

Conclusion

এইভাবে আপনি React Native অ্যাপে Multiple Language Support যোগ করতে পারেন। এখানে আমরা react-i18next ব্যবহার করেছি, যা React Native অ্যাপে ভাষা পরিবর্তন, কনটেন্ট অনুবাদ এবং স্থানীয়করণ (Localization) সহজ করে তোলে। আপনি JSON ফাইল ব্যবহার করে প্রতিটি ভাষার কনটেন্ট সংরক্ষণ করতে পারেন এবং ব্যবহারকারীর ভাষা পরিবর্তন করার মাধ্যমে অ্যাপের ভাষা পরিবর্তন করতে সক্ষম হবেন।

এছাড়া, RTL ভাষা সমর্থনও সহজেই ইন্টিগ্রেট করা যায়।

React Native অ্যাপে Right-to-Left (RTL) লেআউট সাপোর্টের মাধ্যমে আপনি এমন ভাষার জন্য অ্যাপ তৈরি করতে পারেন যা আরবী, হিব্রু, ফার্সী ইত্যাদি ভাষা অনুসরণ করে, যেখানে লেখা ডান থেকে বাম দিকে চলে। React Native স্বাভাবিকভাবে RTL সাপোর্ট দেয়, এবং সহজেই আপনি এটি সক্রিয় করতে পারেন।

এই গাইডে আমরা দেখব কিভাবে React Native অ্যাপে RTL সাপোর্ট চালু করবেন এবং RTL লেআউটের জন্য কিছু স্টাইল ও ডিজাইন পরিবর্তন করবেন।

১. RTL Layout সক্রিয় করা

React Native স্বাভাবিকভাবেই বেশিরভাগ RTL-সম্পর্কিত স্টাইল এবং লেআউট অটো পরিচালনা করে, তবে প্রথমে আপনাকে এটি সক্রিয় করতে হবে। এটি করতে, React Native-এর I18nManager মডিউল ব্যবহার করতে হবে।

RTL সক্রিয় করার ধাপ:

1. I18nManager ইম্পোর্ট করে RTL চালু করুন:

React Native অ্যাপের ইনিশিয়াল পয়েন্টে, সাধারণত App.js ফাইলে, RTL সাপোর্ট চালু করা হয়।

import React, { useEffect } from 'react';
import { I18nManager, Text, View, Button } from 'react-native';

const App = () => {
  useEffect(() => {
    // RTL লেআউট সক্রিয় করুন
    I18nManager.forceRTL(true);
    // RTL পরিবর্তন প্রভাবিত করার জন্য অ্যাপ রিলোড করুন
    I18nManager.allowRTL(true);
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>مرحبا بالعالم</Text> {/* আরবীতে "Hello World" */}
      <Button title="Toggle RTL" onPress={() => I18nManager.forceRTL(!I18nManager.isRTL)} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• I18nManager.forceRTL(true) RTL সক্রিয় করার জন্য ব্যবহার করা হয়।
• I18nManager.allowRTL(true) RTL পরিবর্তনগুলি কার্যকর করতে সহায়তা করে।
• I18nManager.isRTL দিয়ে আপনি বর্তমানে RTL সক্রিয় আছে কিনা তা চেক করতে পারেন।

দ্রষ্টব্য: RTL সেটিংস পরিবর্তন করার পর অ্যাপ রিলোড করার পরামর্শ দেওয়া হয়।

২. RTL এর জন্য স্টাইলস পরিবর্তন করা

একবার RTL সক্রিয় হলে, React Native বেশিরভাগ লেআউট অটোভাবেই উল্টে ফেলবে। তবে কিছু বিশেষ স্টাইল যেমন প্যাডিং, মার্জিন, টেক্সট অ্যালাইনমেন্ট, আপনি ম্যানুয়ালি ঠিক করতে পারেন।

textAlign ব্যবহার করে টেক্সট অ্যালাইনমেন্ট:

RTL লেআউটে, সাধারণত টেক্সট ডানে অ্যালাইন হয়, তাই আপনি টেক্সট অ্যালাইনমেন্ট নিয়ন্ত্রণ করতে textAlign প্রপার্টি ব্যবহার করতে পারেন।

<Text style={{ textAlign: 'right' }}>مرحبا بالعالم</Text>

এটি নিশ্চিত করবে যে টেক্সট সঠিকভাবে ভাষার দিকনির্দেশ অনুযায়ী অ্যালাইন হবে।

লেআউট মিরর করা:

React Native বেশিরভাগ লেআউট কম্পোনেন্ট যেমন flexDirection, padding, এবং margin উল্টে দেয় RTL মোডে। তবে, কিছু ক্ষেত্রে আপনি ম্যানুয়ালি কিছু স্টাইল পরিবর্তন করতে পারেন।

<View style={{ flexDirection: 'row', marginRight: 10, marginLeft: 10 }}>
  <Text>Left Item</Text>
  <Text>Right Item</Text>
</View>

RTL মোডে, লেআউট অটোভাবেই Left Item এবং Right Item এর অর্ডার পাল্টে দেবে।

StyleSheet ব্যবহার করে RTL স্টাইল পরিবর্তন:

আপনি I18nManager দিয়ে RTL বা LTR মোডের জন্য কন্ডিশনাল স্টাইল অ্যাপ্লাই করতে পারেন।

import { I18nManager, StyleSheet, Text, View } from 'react-native';

const App = () => {
  const isRTL = I18nManager.isRTL;

  return (
    <View style={styles.container}>
      <Text style={[styles.text, isRTL ? styles.textRTL : null]}>
        {isRTL ? "مرحباً بالعالم" : "Hello World"}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 24,
    textAlign: 'center',
  },
  textRTL: {
    textAlign: 'right',
  },
});

export default App;

ব্যাখ্যা:

• I18nManager.isRTL দিয়ে চেক করা হয়, এবং সেই অনুযায়ী RTL স্টাইল বা LTR স্টাইল কন্ডিশনালভাবে প্রয়োগ করা হয়।

৩. ইমেজ এবং আইকন RTL এর জন্য পরিবর্তন

RTL লেআউটে, আপনি ইমেজ এবং আইকনগুলোর অবস্থান পরিবর্তন করতে হতে পারে, যেন তা ভাষার নির্দেশনা অনুযায়ী সঠিকভাবে দেখায়। আপনি ইমেজ এবং আইকন মিরর করতে transform প্রপার্টি ব্যবহার করতে পারেন।

transform ব্যবহার করে ইমেজ মিরর করা:

import { Image, StyleSheet, View } from 'react-native';

const App = () => {
  const isRTL = I18nManager.isRTL;

  return (
    <View style={styles.container}>
      <Image
        source={require('./path/to/your/image.png')}
        style={[styles.image, isRTL ? { transform: [{ scaleX: -1 }] } : null]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;

ব্যাখ্যা:

• transform: [{ scaleX: -1 }] RTL মোডে ইমেজটিকে অনুভূমিকভাবে (হরাইজন্টালি) উল্টে দিবে।

৪. নেভিগেশনে RTL সমর্থন

React Navigation স্বাভাবিকভাবে ড্রয়ার এবং স্ট্যাক নেভিগেটরদের জন্য RTL সাপোর্ট দেয়, তবে আপনি ড্রয়ার পজিশন বা হেডার লেআউট কাস্টমাইজ করতে পারেন।

Drawer Navigator-এ RTL ব্যবস্থাপনা:

import React from 'react';
import { I18nManager } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function HomeScreen() {
  return <Text>Home Screen</Text>;
}

function ProfileScreen() {
  return <Text>Profile Screen</Text>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerPosition={I18nManager.isRTL ? 'right' : 'left'}>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

ব্যাখ্যা:

• drawerPosition এর মান right বা left হিসেবে ডাইনামিকভাবে পরিবর্তন করা হয়েছে, যা RTL মোডের ওপর নির্ভর করে।

৫. RTL এবং LTR পরিবর্তন করা

আপনি যদি ডাইনামিকভাবে RTL এবং LTR এর মধ্যে পরিবর্তন করতে চান, তবে I18nManager.forceRTL(true) ব্যবহার করতে পারেন এবং এরপর অ্যাপ রিলোড করে পরিবর্তনগুলো কার্যকর করতে হবে।

import { I18nManager, Button } from 'react-native';

const SwitchDirection = () => {
  const toggleRTL = () => {
    const newDirection = !I18nManager.isRTL;
    I18nManager.forceRTL(newDirection);
    // RTL বা LTR পরিবর্তন কার্যকর করতে অ্যাপ রিলোড করুন
    I18nManager.allowRTL(newDirection);
  };

  return <Button title="Switch RTL/LTR" onPress={toggleRTL} />;
};

সারাংশ

• React Native এ RTL সাপোর্ট পাওয়ার জন্য I18nManager ব্যবহার করতে হয়।
• RTL চালু করার জন্য I18nManager.forceRTL(true) ব্যবহার করা হয় এবং স্টাইলগুলো স্বয়ংক্রিয়ভাবে উল্টে যায়।
• ইমেজ এবং আইকন মিরর করার জন্য transform ব্যবহার করা যায়।
• React Navigation ড্রয়ার এবং স্ট্যাক নেভিগেটরগুলোর জন্য স্বয়ংক্রিয়ভাবে RTL সাপোর্ট দেয়, তবে আপনি কাস্টমাইজও করতে

পারেন।

• ডাইনামিকভাবে RTL এবং LTR পরিবর্তন করতে I18nManager.forceRTL() ব্যবহার করা হয়।

এটি React Native অ্যাপগুলিকে বিভিন্ন ভাষার জন্য আরও ইন্টারন্যাশনালাইজড এবং ব্যবহারকারী-বান্ধব করে তোলে।

Localization (L10N) এবং Currency Formatting অ্যাপ্লিকেশনে ব্যবহারকারীর ভাষা এবং সংস্কৃতি অনুযায়ী কনটেন্ট প্রদর্শন করার জন্য অত্যন্ত গুরুত্বপূর্ণ। বিশেষত, যখন আপনি একটি আন্তর্জাতিক বাজারে কাজ করেন, তখন Localization এবং Currency Formatting ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং বৈশ্বিক ইউজার বেসের জন্য অ্যাপ্লিকেশনটি আরও উপযোগী করে তোলে।

১. Localization (L10N) in React Native

Localization হল অ্যাপ্লিকেশনের কনটেন্টকে বিভিন্ন ভাষায় অনুবাদ করা এবং প্রতিটি দেশের সংস্কৃতি এবং রীতিনীতির সাথে সামঞ্জস্যপূর্ণ করা। React Native অ্যাপ্লিকেশনে Localization এর জন্য বেশ কিছু জনপ্রিয় প্যাকেজ রয়েছে, যেমন react-i18next এবং react-native-localize।

Localization এর জন্য ব্যবহৃত প্যাকেজ:

• react-i18next: এটি i18next লাইব্রেরির উপর ভিত্তি করে তৈরি এবং React এবং React Native অ্যাপ্লিকেশনগুলিতে শক্তিশালী Localization সাপোর্ট দেয়।
• react-native-localize: এটি মোবাইল ডিভাইসে স্থানীয় ভাষা, অঞ্চল এবং অন্যান্য ডিভাইস সম্পর্কিত তথ্য সংগ্রহ করতে সহায়ক।

১.১ react-i18next Setup:

প্রথমে, আপনাকে react-i18next ইনস্টল করতে হবে:

npm install react-i18next i18next

১.২ React-i18next এর সাথে Localization Example:

import React from 'react';
import { Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

// i18n.js configuration file for languages
import i18n from './i18n';  // Localization setup file

const App = () => {
  const { t } = useTranslation();

  return (
    <View>
      <Text>{t('welcome_message')}</Text>
    </View>
  );
};

export default App;

i18n.js (Localization Setup):

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// Importing language files (e.g., English and Bengali)
import en from './locales/en.json';
import bn from './locales/bn.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: en },
    bn: { translation: bn },
  },
  lng: 'en', // Default language
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // React already does escaping
  },
});

export default i18n;

en.json (English Translation File):

{
  "welcome_message": "Welcome to React Native!"
}

bn.json (Bengali Translation File):

{
  "welcome_message": "রিয়েক্ট নেটিভ এ স্বাগতম!"
}

এইভাবে, আপনি react-i18next ব্যবহার করে সহজেই আপনার React Native অ্যাপের Localization সম্পাদন করতে পারেন।

২. Currency Formatting Techniques

Currency Formatting হলো যে প্রক্রিয়ায় ব্যবহারকারী বা দেশের মুদ্রার উপস্থাপনা (যেমন, টাকা, রুপি, ইউএসডি ইত্যাদি) সঠিকভাবে প্রদর্শন করা হয়। বিভিন্ন দেশের মুদ্রার জন্য আলাদা আলাদা সিম্বল এবং ডিজিটাল ফরম্যাট থাকতে পারে, যেমন ইউএস ডলার ($), ভারতীয় রুপি (₹), ইউরো (€), ইত্যাদি।

Currency Formatting এর জন্য ব্যবহৃত প্যাকেজ:

1. Intl.NumberFormat: এটি JavaScript-এর একটি বিল্ট-ইন ইন্টারন্যাশনালাইজেশন API, যা মুদ্রা ফরম্যাট করার জন্য ব্যবহৃত হয়।
2. react-native-localize: এই প্যাকেজটি বিভিন্ন অঞ্চলের জন্য সঠিক ফরম্যাট সরবরাহ করতে পারে।
3. accounting.js: এটি আরও উন্নত ফিচার সহ মুদ্রা ফরম্যাটিং এবং পরিমাণ পরিচালনার জন্য ব্যবহৃত হয়।

২.১ Intl.NumberFormat এর সাথে Currency Formatting Example:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  // Currency formatting using Intl.NumberFormat
  const amount = 123456.78;

  const formattedCurrency = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(amount);

  return (
    <View>
      <Text>{formattedCurrency}</Text>
    </View>
  );
};

export default App;

এই উদাহরণে, Intl.NumberFormat ব্যবহার করে USD মুদ্রার ফরম্যাট করা হয়েছে এবং এটি $123,456.78 হিসাবে প্রদর্শিত হবে।

২.২ Currency Formatting with react-native-localize Example:

react-native-localize ব্যবহার করে আপনি ইউজারের লোকাল অঞ্চলের অনুযায়ী সঠিক মুদ্রার ফরম্যাট পেতে পারেন:

npm install react-native-localize

import React from 'react';
import { Text, View } from 'react-native';
import RNLocalize from 'react-native-localize';

const App = () => {
  const amount = 123456.78;

  // Get the current locale
  const currencyCode = RNLocalize.getCurrencies()[0]; // E.g., 'USD', 'INR'
  const currencySymbol = RNLocalize.getCurrencySymbol(currencyCode);

  const formattedCurrency = new Intl.NumberFormat(RNLocalize.getLocales()[0].languageTag, {
    style: 'currency',
    currency: currencyCode,
  }).format(amount);

  return (
    <View>
      <Text>{`${currencySymbol} ${formattedCurrency}`}</Text>
    </View>
  );
};

export default App;

এখানে, react-native-localize ব্যবহার করে ডিভাইসের লোকাল সিস্টেম থেকে সঠিক মুদ্রা কোড এবং সিম্বল পাওয়া যাচ্ছে এবং সঠিকভাবে ফরম্যাট করা হচ্ছে।

সারাংশ

Localization (L10N) এবং Currency Formatting অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে যখন অ্যাপ্লিকেশনটি আন্তর্জাতিক পর্যায়ে চালু করা হয়। react-i18next এবং react-native-localize এর মতো প্যাকেজগুলি ব্যবহার করে আপনি বিভিন্ন ভাষায় কনটেন্ট স্থানীয়করণ করতে পারেন। এছাড়াও, Intl.NumberFormat এবং react-native-localize ব্যবহার করে আপনি বিভিন্ন দেশের মুদ্রা সঠিকভাবে ফরম্যাট করতে পারবেন, যা ব্যবহারকারীদের জন্য একটি সুন্দর এবং সঠিক অভিজ্ঞতা নিশ্চিত করে।